<template>
	<view>
		<!-- 推荐表单 -->
		<view class="info-form">
			<view class="info-input">
				<view class="input-tit"><text>客户姓名</text></view>
				<view class="input-content"><input type="text" placeholder="请输入客户姓名" placeholder-class="placeholderClass" v-model="name"></view>
			</view>
			<view class="info-input">
				<view class="input-tit"><text>手机号码</text></view>
				<view class="input-content"><input type="text" placeholder="请输入手机号码" placeholder-class="placeholderClass" v-model="tel"></view>
			</view>
			<view class="info-input">
				<view class="input-tit"><text>意向楼盘</text></view>
				<view class="input-content"><input type="text" placeholder="请填写详细地址" placeholder-class="placeholderClass" v-model="address"></view>
			</view>
			<view class="info-input">
				<view class="input-tit"><text>跟办顾问</text></view>
				<view class="input-content">
					<picker :range="adviserList" @change="adviserChange" :value="index" range-key="userName">
						<view class="choose">
							<view class="work"><text>{{adviser}}</text></view>
							<view class="down">
								<image src="../../static/icon/Group.png"></image>
							</view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="button">
			<button @tap="sumbitInfo">提交信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'recommend',
		data() {
			return {
				name: '',
				tel: '',
				address: '',
				adviser: '请选择',
				adviserId: '',
				adviserList: [],
				page:1
			}
		},
		methods: {
			// 选择顾问
			adviserChange(e) {
				for (var i in this.adviserList) {
					if (i == e.target.value) {
						this.adviserId = this.adviserList[i].userId;
						this.adviser = this.adviserList[i].userName;
					}
				}
			},
			// 提交信息
			async sumbitInfo(){
				if(!this.name){
					uni.showToast({
						icon:'none',
						title:'请填写客户姓名'
					})
					return
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel))){
					uni.showToast({
						icon:'none',
						title:'手机号码有误，请确认后重新填写'
					})
					return
				}
				if(!this.address){
					uni.showToast({
						icon:'none',
						title:'请填写详细地址'
					})
					return
				}
				if(!this.adviserId){
					uni.showToast({
						icon:'none',
						title:'请选择顾问'
					})
					return
				}
				// 调用接口
				let res = await this.$fetch(this.$api.clientAdd,{name:this.name,mobile:this.tel,area:this.address,managerId:this.adviserId,managerName:this.adviser})
				console.log(res);
				if(res.code == 0){
					this.name = ''
					this.tel = ''
					this.address = ''
					this.adviserId = ''
					this.adviser = '请选择'
					uni.showToast({
						icon:'none',
						title:'推荐成功，等待审核'
					})
				}else{
					uni.showToast({
						icon:'none',
						title:res.msg
					})
				}
			},
			// 获取经纪人列表 
			async getAgentList(){
				let res = await this.$fetch(this.$api.agentList,{pageNum:this.page,pageSize:9999},'GET')
				this.adviserList = res.rows
			}
		},
		onShow() {
			this.getAgentList()
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.info-form {
		width: 100%;
		height: 400rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.info-input {
		width: 700rpx;
		height: 100rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
	}

	.info-input+.info-input {
		border-top: 2rpx solid #F7F7F7;
	}
	.choose{
		display: flex;
	}
	.input-tit {
		width: 110rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #A6A6A6;
		letter-spacing: -0.68rpx;
		font-size: 28rpx;
		white-space: nowrap;
	}

	.input-content {
		margin-left: 60rpx;
		width: 550rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #5B5B5B;
		letter-spacing: -0.68rpx;
		font-size: 28rpx;
		display: flex;
	}

	.input-content input {
		width: 550rpx;
		height: 100rpx;
		line-height: 100rpx;
		caret-cloror: #874A98;
	}

	.placeholderClass {
		color: #A6A6A6;
	}

	.work {
		color: #A6A6A6;
	}

	.down {
		margin-left: 17.8rpx;
		width: 20rpx;
		height: 17.8rpx;
	}

	.down image {
		width: 20rpx;
		height: 17.8rpx;
	}

	.button {
		width: 690rpx;
		height: 90rpx;
		margin: 152rpx 30rpx 0 30rpx;
	}

	.button button {
		background: #874A98;
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}
</style>
